<template>
    <view class="container">

        <!-- Header -->
        <view class="header flex row-right" v-if="activity.length !== 0">
            <view class="choujiang-btn1 md" @click="goTo('/bundle/pages/luck_draw_code/luck_draw_code?id=')">
                抽奖记录
            </view>
        </view>

        <!-- Section -->
        <view class="section m-t-16">
            <view class="box-wrap">

                <!-- 中奖名单公示 -->
                <view class="notice flex" v-if="activity.show_winning_list">
                    <image class="m-l-18" src="../../static/images/choujinag_notice.png"></image>
                    <view style="width: 90%; ">
                        <u-notice-bar bg-color='none' :volume-icon="false" mode="horizontal" :list="list">
                        </u-notice-bar>
                    </view>
                </view>

                <!-- 抽奖信息 -->
                <view class="message flex row-between nr" v-if="activity.length != 0">
                    <view>我的积分: {{activity.user_integral||'-'}}</view>
                    <template v-if="activity.show_winning_list">
                        <view class="flex" @click="goTo('/bundle/pages/win_prize_code/win_prize_code?id=')">
                            <image class="m-r-10" src="../../static/images/choujiang_name_list.png"></image>
                            中奖名单
                        </view>
                    </template>
                </view>

                <!-- 转盘 -->
                <view class="turntable" v-if="activity.length != 0">
                    <my-turntable :ids="id" @finish="finish" :params="activity"></my-turntable>
                </view>

                <!-- 次数提示 -->
                <view class="num-tips nr" v-if="activity.length != 0">
                    {{activity.limit||'-'}}
                </view>

                <!-- 活动规则 -->
                <view class="rule" v-if="activity.length != 0">
                    <view class="lg bold">活动规则</view>
                    <text class="sm" style="color: #FCD7D2;">{{activity.rule||'-'}}
                    </text>
                </view>

                <view class="flex-1 flex row-center col-center" v-if="activity.length == 0"
                    style="color: #FCD7D2;height: 61vh;">
                    活动已失效
                </view>
            </view>
        </view>

        <!-- Footer -->
        <view class="footer">
            本活动的所有奖品，均由商城提供
        </view>


        <!-- Popup -->
        <u-popup v-model="showResult" mode="center">
            <view class="result-popup flex-col">
                <view class="result-container flex-col row-between">
                    <view class="flex row-center" style="padding:0 118rpx;margin-top: 90rpx">
                        <text style="color: #F95F2F;font-size: 62rpx;text-align: center;">{{resultText}}</text>
                    </view>
                    <view class="m-b-20 flex row-center">
                        <view class="get-btn flex row-center md br60" @click="showResult = false">
                            点击收下
                        </view>
                    </view>
                </view>
                <view style="margin-top: 50rpx" @click="showResult = false">
                    <u-icon name="close-circle" size="62" color="#fff"></u-icon>
                </view>
            </view>
        </u-popup>
        
        <!-- 页面状态 -->
        <page-status :status="pageStatus">
            <template #error>
                <u-empty :text="pageErrorMsg" src="/static/images/empty/order.png" :icon-size="280" />
            </template>
        </page-status>
    </view>
</template>

<script>
    import {
        apiLuckyDrawActivity,
        apiLuckyDrawWinningList
    } from "@/api/luck_draw.js"
	import myTurntable from '@/bundle/components/my-turntable/my-turntable.vue'
    export default {
		components: {
			myTurntable
		},
        data() {
            return {
                id: '',
                // 中奖名单的轮播
                list: [],
                // 活动的信息
                activity: {},
                // 抽奖结果
                resultText: "",
                // 弹窗控制
                showResult: false,
                // 页面的状态
                pageStatus: 'normal',
                pageErrorMsg: ''
            }
        },

        onLoad() {
            try {
                const id = this.$Route.query.id
                this.id = id;
                console.log(id)
            } catch (e) {
                console.log(e)
                //TODO handle the exception
            }
        },

        onShow() {
            // 活动信息
            this.getLuckyDrawActivityFunc();
            // 中奖名单
            this.getLuckyDrawListFunc()
        },
        methods: {
            // 活动信息
            async getLuckyDrawActivityFunc() {
                apiLuckyDrawActivity({
                    id: this.id
                }).then(res => {
                    this.activity = res;
                }).catch(err => {
                    console.log(err)
                    this.pageErrorMsg = err == '请求参数缺token' ? '请先登录' : err
                    this.pageStatus = 'error'
                })
            },

            // 中奖名单
            async getLuckyDrawListFunc() {
                const res = await apiLuckyDrawWinningList({
                    id: this.id,
                    page_no: 1,
                    page_size: 10
                })
                this.list = res.lists.map(item => item.title)
            },
            
            // 确认收下
            finish(e) {
                this.showResult = true;
                this.resultText = e.detail
            },
            
            goTo(url, id) {
                uni.navigateTo({
                    url: url + this.id
                })
            },
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #FF2F46;
    }

    .container {
        width: 100%;
        padding-top: 300rpx;
        background: url() no-repeat;
        background-size: 100% auto !important;
        background-repeat: no-repeat;

        .header {
            .choujiang-btn1 {
                color: #7D350C;
                background-color: #FEF0B5;
                border-radius: 40rpx 0 0 40rpx;
                box-shadow: 0px 3px 10px #f95f2f;
                padding: 18rpx 24rpx 20rpx 32rpx;
            }
        }

        .section {
            padding: 0 30rpx;

            .box-wrap {
                width: 690rpx;
                padding: 27rpx 28rpx;
                border-radius: 30rpx;
                background: #ed3720;
                border: 12rpx solid #fe6847;

                // 中奖名单公示
                .notice {
                    margin: 0 24rpx;
                    height: 58rpx;
                    padding: 12rpx 0;
                    border-radius: 29rpx;
                    background: #d30c16;
                    border: 2rpx solid #edb17d;

                    image {
                        width: 32rpx;
                        height: 32rpx;
                    }
                }

                // 中奖信息奖品等
                .message {
                    margin: 30rpx 10rpx;
                    color: #FEF0B5;

                    image {
                        width: 28rpx;
                        height: 30rpx;
                    }
                }

                // 转盘
                .turntable {
                    width: 610rpx;
                    height: 610rpx;
                    overflow: hidden;
                    border-radius: 20rpx;
                    padding: 35rpx 38rpx;
                    background: url() no-repeat;
                    background-size: 100% auto !important;
                }

                // 每日抽奖次数提示
                .num-tips {
                    color: #fbccc7;
                    margin: 16rpx 0;
                    text-align: center;
                }

                // 活动规则
                .rule {
                    color: #FCD7D2;
                    font-size: $-font-size-sm;
                    padding: 30rpx 16rpx 30rpx 28rpx;
                    border-radius: 20rpx;
                    background: #d30c16;
                }
            }
        }

        // Footer
        .footer {
            color: #FFF2D9;
            padding: 30rpx 0;
            text-align: center;
            font-size: $-font-size-xs;
        }

        // 弹窗
        .result-popup {
            text-align: center;
            width: 545rpx;
            height: 626rpx;

            .result-container {
                width: 545rpx;
                height: 514rpx;
                background-size: 100% 100%;
                background-image: url(../../static/images/luck_draw_bg.png);
            }

            image {
                border: 2rpx solid #fff;
                border-radius: 50%;
            }
        }

        // 按钮
        .get-btn {
            width: 320rpx;
            height: 70rpx;
            color: #7B3200;
            background: linear-gradient(180deg, #FEF0B0 0%, #FFA92E 100%);
        }
    }
</style>
